<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      投注内容
    </template>
    <el-table :data="tableData"
              border
              :span-method="objectSpanMethod"
              v-loading="loading">
      <el-table-column label="序号" align="center">
        <template slot-scope="{row}">
         {{row.index}}
        </template>
      </el-table-column>
      <el-table-column label="子游戏" align="center">
        <template slot-scope="{row}">
          {{CONST.sportNameMap (row.event.eventType)}}
        </template>
      </el-table-column>
      <el-table-column label="赛事" align="center">
        <template slot-scope="{row}">
          联赛:{{row.event.tag}}<br/>
          双方:{{row.event.name}}
        </template>
      </el-table-column>
      <el-table-column label="单场赔率" align="center">
        <template slot-scope="{row}">
        {{CONST.sportOddsType(oddsType)}}:{{row.odds}}
        </template>
      </el-table-column>
      <el-table-column label="下注内容" align="center">
        <template slot-scope="{row}">
          {{CONST.sportSelectionNameMap (row.selection)}} - {{CONST.sportPeriodNameMap (row.period)}} - {{CONST.sportBetTypeMap(row.betType)}}
        </template>
      </el-table-column>
      <el-table-column label="下注金额" align="center">
        <template slot-scope="{row}">
         {{amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="总赔率" align="center">
        <template slot-scope="{row}">
          {{oddsAll}}
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="cancel">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import CONST from './CONST'
  import {form} from '@/build'
  export default {
    name: "game-dialog",
    props: ['value','rowData'],
    mixins: [form],
    data() {
      return {
        formLabelWidth: '180px',
        tableData:JSON.parse(this.rowData.bets),
        amount:this.rowData.amount,
        oddsAll:this.rowData.odds,
        oddsType:this.rowData.oddsType,
        CONST:CONST
      }
    },
    mounted() {
      this.tableData.forEach((v,k)=>{
        this.$set(v,'index',k+1)
      })
    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }){
        if (columnIndex === 5 || columnIndex === 6) {
          return {
            rowspan: this.tableData.length,
            colspan: 1
          };
        }
      }
    },

  }
</script>

<style lang="scss" scoped>

</style>
